<template>
  <div class="binding-phone">
    <h3>绑定新手机号</h3>
    <input type="tel" v-model="phone" name="" id="" placeholder="请输入新手机号码">
    <van-button type="info" block :disabled='isDisabled' class="submit" @click="nextBtn"
          >下一步</van-button
        >
  </div>
</template>

<script>
import { sendCode } from '../service/service.js'
export default {
  name: 'BingingPhone',
  data () {
    return {
      phone: '',
      isDisabled: true,
      oldPhone: ''

    }
  },
  created () {
    this.oldPhone = this.$route.query.phone
  },
  watch: {
    phone (newval) {
      if (newval && /^1[345678]\d{9}$/.test(newval)) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
    }
  },
  methods: {
    nextBtn () {
      if (this.phone === this.oldPhone) {
        this.$toast('新绑定号码不能和旧号码相同！')
        return
      }
      sendCode({ phone: this.phone })
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }
          this.$router.push({ name: 'BindingVerify', params: { phone: this.phone } })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    numFormat (num) {
      return num && num.slice(0, 3) + '****' + num.slice(7)
    }
  }
}
</script>
<style lang="less" scoped>
.binding-phone {
  background: #fff;
  padding: 30px;

  > h3 {
    font-size: 16px;
    font-weight: 700;
  }
input{
  margin-top: 20px;
  height: 42px;
  border:none;
  border-bottom: 1px solid#F2F3F5;
  width: 100%;
}
}
.submit {
  margin-top: 120px;
  border-radius: 5px;
}
</style>
